
<template>
<!-- 新增物料-->
  <div class="AddMaterial">
 <div class="side_1"></div>
      <span class="add_1">
    物料详情
 </span>
 <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh">返回</el-button>
   <div class="head">
     <div class="lt">
          <span> 物料信息</span>
        </div>
        <div class="form_pro">
                 <el-row :gutter="10">
          <el-col :span="5">
            <el-form :model="materialformInline"  class="demo-form-inline" label-width="110px" >
              <el-form-item label="结构层级">
                 <el-input v-model="materialformInline.structure"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
                     <el-col :span="5"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="100px" >
            <el-form-item label="分组号">
              <el-input v-model="materialformInline.fenzu"></el-input>
            </el-form-item>
             </el-form>
                  </el-col>
                           <el-col :span="5"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="110px" >
            <el-form-item label="件号">
              <el-input v-model="materialformInline.jianhao"></el-input>
            </el-form-item>
             </el-form>
               </el-col>
                      <el-col :span="4"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="80px" >
            <el-form-item label="名称">
              <el-input v-model="materialformInline.name"></el-input>
            </el-form-item>
             </el-form>
             </el-col>
                            <el-col :span="4"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="80px" >
            <el-form-item label="材质">
              <el-input v-model="materialformInline.caizhi"></el-input>
            </el-form-item>
             </el-form>
         </el-col>
         
                   <el-col :span="5"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="110px" >
            <el-form-item label="数量">
              <el-input v-model="materialformInline.number"></el-input>
            </el-form-item>
             </el-form>
                   </el-col>
          <el-col :span="5"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="100px" >
              <el-form-item label="胚料尺寸-宽">
                <el-input v-model="materialformInline.kuan"></el-input>
               </el-form-item>
             </el-form>
            </el-col>
                <el-col :span="5"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="110px" > 
            <el-form-item label="胚料尺寸-长">
              <el-input v-model="materialformInline.chang"></el-input>
            </el-form-item>
             </el-form>
             </el-col>
                     <el-col :span="4"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="80px" >
            <el-form-item label="备注">
              <el-input v-model="materialformInline.remark" ></el-input>
            </el-form-item>
             </el-form>
                     </el-col>
                       <el-col :span="4"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="80px" >
            <el-form-item label="类别">
              <el-input v-model="materialformInline.category"></el-input>
            </el-form-item>
             </el-form>
              </el-col>
                     <el-col :span="5"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="110px" >
            <el-form-item label="整车实际重量">
              <el-input v-model="materialformInline.zhengche"></el-input>
            </el-form-item>
             </el-form>
          </el-col>
                <el-col :span="5"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="110px" >
            <el-form-item label="单件实际重量">
              <el-input v-model="materialformInline.danjian"></el-input>
            </el-form-item>
             </el-form>
                   </el-col>
                            <el-col :span="5"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="110px" >
            <el-form-item label="出件数量">
              <el-input v-model="materialformInline.chujian"></el-input>
            </el-form-item>
             </el-form>
              </el-col>
                          <el-col :span="8"> 
             <el-form :model="materialformInline"  class="demo-form-inline" label-width="70px" >
            <el-form-item label="责任人">
              <el-select v-model="materialformInline.zeren" placeholder>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-input v-model="cheti" style="width:60px"></el-input>
            </el-form-item>        
        </el-form>
           </el-col>
         </el-row>
        </div>      
   </div>
  <div class="body">
      <div class="left">
        <div class="lt">
          <span>原料图片</span>
        </div>
       
            <div class="upload_1">
                <el-upload
                class="avatar-uploader"
                action="/apis/PublicAPI.asmx/UpImg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> 
            </div>
      </div>
        <div class="right" >
            <div class="lt">
          <span>原料图纸</span>
        </div>
        <div class="img-left">
        <div class="upload_2" @mousemove="mousemove" @mouseout="mouseout">
             <el-upload
                class="avatar-uploader"
                action="/apis/PublicAPI.asmx/UpImg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> 
                   </div>
            <div class="num">
              <span>
               图纸编号
              </span>
               <el-input v-model="drawingsno"></el-input>
            </div>
            <div class="dia" v-show="show1"> 
        <div class="lt">
          <span>图纸信息</span>
        </div>
          <el-row :gutter="10">
          <el-col :span="20">
       <el-form  :model="formInline"   class="demo-form-inline" label-width="80px" >
         <el-form-item label="图纸编号">
             <el-input style="width:180px" v-model="formInline.drawingsno"></el-input>
         </el-form-item>
       </el-form>
          </el-col>
       
          <el-col :span="10">
            <el-form  :model="formInline"   class="demo-form-inline" label-width="70px" >
              <el-form-item label="冲压件">
             <el-input style="width:70px" v-model="formInline.cyj"></el-input>
         </el-form-item>
            </el-form>
          </el-col>
            <el-col :span="10">
            <el-form  :model="formInline"   class="demo-form-inline" label-width="70px" >
             <el-form-item label="数量">
             <el-input style="width:70px" v-model="formInline.cyjnumber"></el-input>
         </el-form-item>
            </el-form>
            </el-col>
              <el-col :span="10">
            <el-form  :model="formInline"   class="demo-form-inline" label-width="70px">
             <el-form-item label="冲压小件">
             <el-input style="width:70px" v-model="formInline.cyxj"></el-input>
         </el-form-item>
            </el-form>
              </el-col>
                <el-col :span="10">
            <el-form  :model="formInline"   class="demo-form-inline" label-width="70px" >
             <el-form-item label="数量">
             <el-input style="width:70px" v-model="formInline.cyxjnumber"></el-input>
         </el-form-item>
         </el-form> 
                </el-col>
        </el-row>
  </div>
      
         　
  </div>
      </div>
  </div>

   <div class="btn_bottom">
        <el-button type="primary" size="medium" @click="queDing">确定</el-button>
        <el-button type="info" size="medium" @click="quXiao">返回</el-button>
      </div>
  </div>

</template>

<script>
import axios from "axios";
export default {
  
    data(){
      return{
   
         cheti:'车体',
          imageUrl: '',
          show1:false,
     options: [
       {
          value: '选项1',
          label: '江淮'
        }, 
        {
          value: '选项2',
          label: '同捷'
        }
        ],
        value: '选项1',
      
   materialformInline:{
     structure:'',
        fenzu:'',
        jianhao:'',
        name:'',
        caizhi:'',
        number:'',
        chang:'',
        kuan:'',
        chujian:'',
        danjian:'',
        zhengche:'',
        category:'',
        remark:'',
        zeren:'',
        },
        formInline:{
          drawingsno:'',
      cyj:'',
      cyjnumber:'',
      cyxj:'',
      cyxjnumber:'',
        },
        Id:'',
        drawingsno:''
      }
    },
    created() {
   this.Id=this.$route.query.id;
   this.getDetail()
  },
    methods:{
         Fh(){
          window.history.go(-1);
      },
// 物料详情
       getDetail() {

      axios("/apis/ProductManagement.asmx/Det_Product?index=2&jsondata=" + this.Id).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          console.log(datas)
          var list = JSON.parse(datas.string.__text);
              console.log(list);
          //产品信息
   
         this.materialformInline=list.sour;

        //弹框
      this.formInline=list.sour1;

          //原料图片  
          this.imageUrl=list.sour.rawpath;
          //原料图纸
         this.imageUrl2=list.sour.drawingspath;
         //原料编号
        this.drawingsno=list.sour.drawingsno;
          
        }
      )
       },
        queDing() {
      window.history.go(-1);
    },
    quXiao() {
      window.history.go(-1);
    },
    //上传图片
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {

        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return  isLt2M;
      },
       // 鼠标移入
    mousemove() {
      this.show1 = true;

    },
    //鼠标移出
    mouseout() {
      this.show1 = false;
  
    },
  } 
      }
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.side_1{
    width:5px;
    height: 16px;
    background-color:$Header_color;
    margin-left: 10px;
    margin-top: 20px;
}
.add_1{
   margin-left: 20px;
  margin-top: -20px;
   float: left;
   font-size: 18px;
   font-weight: 400

}
.btn_fanhui{
    margin-top: -20px;
   margin-right: 20px;
    float:right;
}
.head{
  
    width: 98%;
    height: 300px;
    background-color: $white;
    margin-left: 10px;
    margin-top: 50px;
    overflow: hidden;
    border: 1px solid $bordercolor;
    margin-bottom: 20px;
      border-radius: 5px;

}
.body{
  overflow: hidden;
  margin-bottom: 20px;
  margin-left: 10px;
  width: 98%;
}
.left {
  background-color: $white;
  display: inline-block;
  border-radius: 5px;
  width: 20%;
  height: 387px;
  border: 1px solid $bordercolor;

}
.right {
  width:78%;
  float: right;
  background-color: $white;
  border-radius: 5px;
  height: 387px;
  border: 1px solid $bordercolor;
 
}
.lt {
  height: 60px;
  line-height: 60px;
  width:95%;
  margin-left: 15px;
  border-bottom: 1px solid $bordercolor;
  margin-bottom: 40px;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
font-weight: bold;
font-style: normal;
font-size: 14px;
}
//  .lt .span {
//   margin-left: 20px;
// }


.form_pro{
  padding-left: 25px;
}

.el-select {
  width: 25% !important;

margin-left: 10px;

}
.footer{
  margin-left:35%;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .upload_1{
  width:200px;
  height: 200px;
  margin-left: 30px;
  text-align: center;
  // border: 1px solid #f00;
   
  }
.upload_2{
  width:200px;
  height: 200px;
  margin-left: 30px;
  text-align: center;


}
.num{
  margin-top: 20px;
  margin-left: 40px;
}
.btn_bottom{
  margin-top: 30px;
  margin-left: 45%;
}
.el-input{
  width:120px;
}
.f1,
.f2,
.f3,
.f4
{
     width: 17%;
  float: left;
}

.f5{
    width: 32%;
  float: left;
 
}

.img-left{


  display: inline-block;
}
.dia{
  width:280px;
  height:280px;
  border: 1px solid $bordercolor;
  margin-left: 90%;
  float:left;
  margin-right: 60%;
 margin-top: -290px;

}
.el-form-right{
  margin-left: 15px;

}

</style>